<template>
  <div class="echarts-count">
    <div class="header">
      <span class="totalSales">{{ title }}</span>
      <div class="icon">
        <el-tooltip class="box-item" effect="light" :content="tips" placement="bottom">
          <el-icon><Warning /></el-icon>
        </el-tooltip>
      </div>
    </div>
    <div class="content">
      <span v-if="amount === 'saleroom'">￥</span>
      <span ref="count1Ref"> {{ number1 }}</span>
    </div>
    <div class="footer">
      <span class="commoditySales">{{ subtitle }}</span>
      <span v-if="amount === 'saleroom'">￥</span>
      <span ref="count2Ref">{{ number2 }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { CountUp } from 'countup.js'
import { ref, onMounted } from 'vue'
interface IProps {
  amount?: string
  title: string
  tips: string
  number1: number
  number2: number
  subtitle: string
}
const props = defineProps<IProps>()
const count1Ref = ref<HTMLElement>()
const count2Ref = ref<HTMLElement>()
const options = {
  decimalPlaces: 2
  // prefix: props.amount === 'saleroom' ? '¥' : ' '
}
onMounted(() => {
  const countUp1 = new CountUp(count1Ref.value!, props.number1, options)
  const countUp2 = new CountUp(count2Ref.value!, props.number2, options)
  countUp1.start()
  countUp2.start()
})
</script>

<style lang="less" scoped>
.echarts-count {
  background-color: var(--el--page--search--bg--);
  padding: 10px;
  box-shadow: 0 0 8px #a9a9a9;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #999;
  }
  .content {
    padding: 15px 0;
    font-size: 20px;
    border-bottom: 1px solid #efefef;
  }
  .footer {
    font-size: 13px;
    margin-top: 10px;
    span:first-child {
      margin-right: 5px;
    }
  }
}
</style>
